<template>
  <MyCard v-if="show" :title="exam.name"  class="exam_page">
    <div class="page_box">
      <!--根据获取到的试题列表循环渲染-->
      <div class="question_container" v-for="(item,index) in questionList">
        <p>{{ index + 1 }}.&emsp;{{ item.content }}</p>
        <ChoiceAnswerUser @userInput="answerInput" :question="item"></ChoiceAnswerUser>
      </div>
    </div>
    <template #leftButtonGroup>
      <div style="display: flex;flex-direction: row;align-items: center">
        <el-button type="danger" @click="showExit=true">离开</el-button>
        <el-button type="success" @click="confirmCommitDialog=true">交卷</el-button>
      </div>
    </template>
  </MyCard>

  <!--各类弹窗提示-->
  <el-dialog title="提交" v-model="confirmCommitDialog">
    确定提交吗？提交后将无法再修改！
    <el-button type="warning" @click="commit">确定</el-button>
    <el-button type="info" @click="confirmCommitDialog= false">取消</el-button>
  </el-dialog>
  <el-dialog title="提示" v-model="showFinish" @close="router.push({name:'myexam'})">
    {{ finishText }}
    <el-button type="success" @click="router.push({name:'myexam'})">回到考试列表</el-button>
  </el-dialog>
  <el-dialog title="出错了" v-model="showError">
    {{ errorTxt }}
  </el-dialog>
  <el-dialog title="离开" v-model="showExit">
    确认离开考试吗？在考试结束前还可再次进入，但已作答的题目不会保存！
    <el-button type="danger" @click="router.back()">离开</el-button>
    <el-button @click="showExit = false">取消</el-button>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Exam, Question, User, UserAnswer, UserAnswerList} from "../types/mytypes";
import {PageStore, UserStore} from "../store/store";
import MyCard from "../components/MyCard.vue";
import router from "../router/router";
import {QuestionRequest} from "../request/MyRequset";
import ChoiceAnswerUser from "../components/Question/ChoiceAnswerUser.vue";
interface TempAnswer {
  userAnswer: string[],
  questionId: number
}
let show = ref(false)
const exam: Exam = PageStore.getNowExam();
const user: User = UserStore.getUser();
let questionList = ref<Question[]>([])
let userAnswerList= ref<UserAnswerList[]>([]);
let confirmCommitDialog = ref(false)
let showError = ref(false)
let errorTxt = ref("")
let showFinish = ref(false)
let finishText = ref("提交成功！")
/*let userInput = ref<string[]>([])*/
let showExit = ref(false)
const answerInput = (val: TempAnswer) => {
  pushAnswerToUserAnswer(val.questionId, val.userAnswer);
}
onMounted(async () => {
  //await toggle();
  await initData();
  show.value = true
})
const commit = async () => {
  let requestAnswerList: UserAnswer[] = [];
  for (let i in userAnswerList.value) {
    let userAnswer = userAnswerList.value[i];
    for (let j in (userAnswer.answerList as string[])) {
      let answerStr = (userAnswer.answerList as string[])[j];
      let tempAnswer: UserAnswer = {
        q_id: userAnswer.q_id,
        u_id: userAnswer.u_id,
        e_id:exam.id,
        answer: answerStr
      }
      requestAnswerList.push(tempAnswer);
    }
  }

  let commitResponse = await QuestionRequest.commitUserAnswerList(requestAnswerList,exam.id);
  if (commitResponse.suc) {
    showFinish.value = true;
  } else {
    showError.value = true;
    errorTxt.value = commitResponse.message;
  }
}
const initData = async () => {
  let questionRes = await QuestionRequest.getByExamId(exam.id);
  questionList.value = questionRes.data;
  for (let i in questionList.value) {
    let q = questionList.value[i];
    userAnswerList.value.push({
      u_id: user.id,
      q_id: q.id as number
    })
  }
}

const pushAnswerToUserAnswer = (q_id: number, answer: string[]) => {
  for (let i in userAnswerList.value) {
    if (userAnswerList.value[i].q_id == q_id) {
      userAnswerList.value[i].answerList = answer;
      return;
    }
  }
}
</script>

<style scoped lang="scss">
.exam_page {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  .page_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    .question_container {
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 10px;
      width: 50em;
      margin-top: 10px;
    }
  }
}
</style>